/**
 * 属性面板:基本信息
 */
import * as React from 'react';
import '../tools.css';
import { AreaType, Identifier, PositionType } from '../types';
import { Icon } from './icon';

interface PropertyPanelProps {
  value?: Partial<PositionType>; // 本节点内容
  dbNodeMap: { [key: Identifier]: PositionType };
  onChange?: (value: Partial<PositionType>) => void; // 更新本节点
  onChangeParent?: (_id: Identifier) => void; // 切换父节点
  onSubmit?: (value: Partial<PositionType>) => void; // 保存本节点
  onRemove?: (_id?: Identifier) => void; // 删除本节点
}
export default function PanelBaseInfo({ dbNodeMap = {}, value, onChange, onSubmit, onRemove }: PropertyPanelProps) {
  const [ancestorShow, setAncestorShow] = React.useState(false); //上级节点
  const [areaSelected, setAreaSelected] = React.useState(false); //选中区域
  const [areaShow, setAreaShow] = React.useState(false); //区域可见
  const [bgShow, setBgShow] = React.useState(false); //背景图可见
  const handleChangeField = (fieldName: string) => {
    return (evt: any) => {
      if (onChange && value) {
        const nValue: Partial<PositionType> = { ...value, [fieldName]: evt.target.value }
        onChange(nValue);
      }
    }
  }
  const handleChangeBgField = (fieldName: string) => {
    return (evt: any) => {
      if (onChange && value) {
        const bg = { ...(value.bg || {}), [fieldName]: evt.target.value };
        const nValue: Partial<PositionType> = { ...value, bg }
        onChange(nValue);
      }
    }
  }
  const handleChangeAreaType = (areaType1: AreaType) => {
    if (value && value?.areaType !== areaType1) {
      const nValue: Partial<PositionType> = { ...value, location: undefined, areaType: areaType1, area: undefined, _tmpArea: undefined, _tmpPreferEdit: 'graph' }
      onChange?.(nValue);
    } else {
      console.log('info:areaType没变化');
    }
  }

  if (!value) return <div style={{ background: 'rgba(255,255,255,0.90)', padding: '10px 20px', borderRadius: '10px', boxShadow: '0px 4px 4px 0px rgba(0,0,0,0.25)' }}>未选中节点</div>
  return (
    <div style={{ paddingBottom: '70px' }}>
      <div>
        <div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <h3>基本信息</h3>
            <div style={{ fontSize: '11px' }}>
              <span style={{ marginLeft: '15px' }}>ID:</span>
              <span>{value._id}</span>
            </div>
          </div>
          <div className="rc-property-item">
            <span className="rc-property-item-label">点位名称:</span>
            <input className="customInput" value={value.name ?? ''} onChange={handleChangeField('name')} placeholder='请输入点位名称' />
          </div>
          <div className="rc-property-item">
            <span className="rc-property-item-label">节点类型:</span>
            <div className="buttonGroup">
              <div className={"buttonGroup-item" + (value?.nodeType === 'structure' ? ' checked' : '')} onClick={() => handleChangeField('nodeType')({ target: { value: 'structure' } })}>建筑</div>
              <div className={"buttonGroup-item" + (value?.nodeType === 'position' ? ' checked' : '')} onClick={() => handleChangeField('nodeType')({ target: { value: 'position' } })}>点位</div>
            </div>
          </div>
          <div className="rc-property-item">
            <span className="rc-property-item-label">父节点:</span>
            <input className="customInput" value={value.parent && dbNodeMap[value.parent]?.name || ''} readOnly={true} />
            <div style={{ display: 'flex', alignItems: 'center', marginLeft: '10px', cursor: 'pointer' }} onClick={() => setAncestorShow(!ancestorShow)}><Icon name='icon-parent' color={ancestorShow ? '#3D5AFE' : '#BDBDBD'} /><span style={{ color: ancestorShow ? '#3D5AFE' : '#BDBDBD' }}>上级</span></div>
          </div>
          {ancestorShow ? <div className="rc-property-item">
            <span className="rc-property-item-label">上级节点: </span>
            <span style={{maxWidth: 300}}>{value.ancestor?.map(itemId => `/${dbNodeMap[itemId]?.name || '-'}`)}</span>
          </div> : null}
        </div>
        <div style={{ marginTop: '15px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h3>位置与区域</h3>
            <div style={{ display: 'flex' }}>
              <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', marginRight: '10px' }} onClick={() => setAreaShow(!areaShow)}>
                <Icon name="icon-look" color={areaShow ? '#3D5AFE' : '#BDBDBD'} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => setAreaSelected(!areaSelected)}>
                <Icon name="icon-selected" color={areaSelected ? '#3D5AFE' : '#BDBDBD'} />
              </div>
            </div>
          </div>
          <div className="rc-property-item">
            <span className="rc-property-item-label">位置类型:</span>
            <input className="customInput" value={value.locationType ?? ''} readOnly={true} />
          </div>
          <div className="rc-property-item">
            <span className="rc-property-item-label">区域类型:</span>
            <div className="buttonGroup">
              <div className={"buttonGroup-item" + (value?.areaType === 'point' ? ' checked' : '')} onClick={() => handleChangeAreaType('point')}><Icon name="icon-point" color={"#3D5AFE"} /></div>
              <div className={"buttonGroup-item" + (value?.areaType === 'polygon' ? ' checked' : '')} onClick={() => handleChangeAreaType('polygon')}><Icon name="icon-polygon" color={"#3D5AFE"} /></div>
              <div className={"buttonGroup-item" + (value?.areaType === 'rectangle' ? ' checked' : '')} onClick={() => handleChangeAreaType('rectangle')}><Icon name="icon-rectangle" color={"#3D5AFE"} /></div>
              <div className={"buttonGroup-item" + (value?.areaType === 'circle' ? ' checked' : '')} onClick={() => handleChangeAreaType('circle')}><Icon name="icon-circle" color={"#3D5AFE"} /></div>
            </div>
          </div>
          <div className="rc-property-item">
            <div><input className="customInput" value={(value.location && value.location[0]) ?? ''} readOnly={true} /></div>
            <div><input className="customInput" style={{ marginLeft: '5px' }} value={(value.location && value.location[1]) ?? ''} readOnly={true} /></div>
          </div>
          <div className="rc-property-item">
            {value?.areaType === 'circle' ? <input className="customInput" value={(value.area as number) ?? ''} readOnly={true} /> : null}
            {value?.areaType === 'rectangle' ? (
              <div style={{ marginTop: '3px' }}>
                <input className="customInput" value={(value.area as number[])?.[0] ?? ''} readOnly={true} />
                <input className="customInput" style={{ marginLeft: '5px' }} value={(value.area as number[])?.[1] ?? ''} readOnly={true} />
              </div>
            ) : null}
            {value?.areaType === 'polygon' && value?.area && (value?.area as any[])?.length > 0 ? (
              <div>
                {(value?.area as number[][])?.map((item, index: number) => {
                  return <div key={index} style={{ marginTop: '3px' }}>
                    <input className="customInput" value={item?.[0] ?? ''} readOnly={true} />
                    <input className="customInput" style={{ marginLeft: '5px' }} value={item?.[1] ?? ''} readOnly={true} />
                  </div>
                })}
              </div>) : null}
          </div>
        </div>
        <div style={{ marginTop: '15px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h3>背景</h3>
            <div style={{ display: 'flex' }}>
              <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', marginRight: '10px' }} onClick={() => setBgShow(!bgShow)}>
                <Icon name="icon-look" color={bgShow ? '#3D5AFE' : '#BDBDBD'} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={() => setAreaSelected(!areaSelected)}>
                <Icon name="icon-selected" color={!areaSelected ? '#3D5AFE' : '#BDBDBD'} />
              </div>
            </div>
          </div>
          <div onClick={() => handleChangeBgField('image')({ target: { value: '/images/example.jpg' } })}>
            <Icon name="icon-addimg" size={100} />
          </div>
          <div style={{ fontSize: '13px', marginTop: '5px' }}>
            <div style={{ width: '70px', textAlign: 'right' }}>四顶点位置:</div>
            <div>
              <div style={{ marginTop: '5px' }}>
                <input className="customInput" value={value.bg?.corners?.[0]?.[0]} readOnly={true} />
                <input className="customInput" style={{ marginLeft: '5px' }} value={value.bg?.corners?.[0]?.[1]} readOnly={true} />
              </div>
              <div style={{ marginTop: '5px' }}>
                <input className="customInput" value={value.bg?.corners?.[1]?.[0]} readOnly={true} />
                <input className="customInput" style={{ marginLeft: '5px' }} value={value.bg?.corners?.[1]?.[1]} readOnly={true} />
              </div>
              <div style={{ marginTop: '5px' }}>
                <input className="customInput" value={value.bg?.corners?.[2]?.[0]} readOnly={true} />
                <input className="customInput" style={{ marginLeft: '5px' }} value={value.bg?.corners?.[2]?.[1]} readOnly={true} />
              </div>
              <div style={{ marginTop: '5px' }}>
                <input className="customInput" value={value.bg?.corners?.[3]?.[0]} readOnly={true} />
                <input className="customInput" style={{ marginLeft: '5px' }} value={value.bg?.corners?.[3]?.[1]} readOnly={true} />
              </div>
            </div>
          </div>
        </div>
        <div style={{ position: 'absolute', bottom: '16px', width: '90%', display: 'flex' }}>
          <button style={{ border: '1px solid #3D5AFE', color: '#3D5AFE', background: '#fff', flex: 1, marginRight: '20px' }} onClick={() => onRemove?.(value?._id)}>重置</button>
          <button style={{ border: '1px solid #3d5afe', color: '#fff', background: '#3D5AFE', flex: 1 }} onClick={() => onSubmit?.(value)}>保存</button>
        </div>
      </div>
    </div>
  )
}
